<!-- DeptEdit.vue -->
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useDeptStore } from '@/stores/deptStore.js'

const deptStore = useDeptStore()
const dialogVisible = ref(false)

const dept = reactive({
  id: '',
  name: '',
  parentId: '',
  sort: '',
  description: ''
})

// 新增：部门树数据
const deptTreeOptions = ref([])

const rules = ref({
  name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
  parentId: [{ required: true, message: '请选择父部门', trigger: 'change' }], // 修改提示信息
  sort: [{ required: true, message: '请输入排序值', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
})

const deptFormRef = ref(null)

// 新增：获取部门树数据并转换为下拉选项
const loadDeptTree = async () => {
  try {
    await deptStore.getDeptTree()

    // 转换树形结构为扁平化选项列表
    const flattenTree = (nodes, level = 0) => {
      const result = []
      nodes.forEach(node => {
        // 添加当前节点
        result.push({
          value: node.id,
          label: '　'.repeat(level) + node.name, // 添加缩进显示层级关系
          disabled: node.id == dept.id // 禁用当前编辑的部门
        })

        // 递归处理子节点
        if (node.children && node.children.length > 0) {
          result.push(...flattenTree(node.children, level + 1))
        }
      })
      return result
    }

    // 转换数据格式以适配 el-select
    deptTreeOptions.value = flattenTree(deptStore.deptTree)
  } catch (error) {
    console.error('获取部门树失败:', error)
  }
}

const submitForm = () => {
  deptFormRef.value?.validate().then(() => {
    console.log('校验通过,提交数据', dept)
    deptStore.updateDept({
      ...dept
    })
    dialogVisible.value = false
  }).catch(() => {
    console.log('校验失败')
  })
}

const show = (deptInfo) => {
  console.log('-------------show----------', deptInfo)
  Object.assign(dept, deptInfo)
  dialogVisible.value = true
  // 显示对话框时加载部门树
  loadDeptTree()
}

const close = () => {
  dialogVisible.value = false
}

// 对外暴露show方法
defineExpose({
  show
})
</script>

<template>
  <el-dialog
    title="编辑部门"
    v-model="dialogVisible"
    width="50%"
    @close="close"
  >
    <el-form :model="dept" :rules="rules" ref="deptFormRef" label-width="100px">
      <el-form-item label="部门编号" prop="id">
        <el-input v-model="dept.id" placeholder="请输入部门编号" disabled></el-input>
      </el-form-item>
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="dept.name" placeholder="请输入部门名称"></el-input>
      </el-form-item>
      <el-form-item label="父部门" prop="parentId">
        <!-- 修改：将输入框改为下拉选择框 -->
        <el-select
          v-model="dept.parentId"
          placeholder="请选择父部门"
          style="width: 100%"
          clearable
          filterable
        >
          <el-option
            v-for="item in deptTreeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="dept.sort" placeholder="请输入排序值"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="dept.description" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>
